<template>
  <div>
    <common-header></common-header>

    <div class="layui-container fly-marginTop fly-user-main">

      <user-left
          @showContent="showContent"
      >
      </user-left>

      <div class="fly-panel fly-panel-user" pad20>

        <index-content
            v-if="show == 'index'"
            :list="list"
            :total="total"
        >
        </index-content>

        <Password
            v-if="show == 'password'"
            :user="user"
        >
        </Password>

        <Message
            v-if="show == 'message'"
        >
        </Message>

      </div>
    </div>

  </div>
</template>

<script>
import CommonHeader from "@/pages/common/Header";
import UserLeft from '@/pages/user/components/Left'
import IndexContent from "@/pages/user/components/IndexContent";
import Password from "@/pages/user/components/Password";
import Message from "@/pages/user/components/Message";
import {userTopic} from "@/api/user";

export default {
  name: 'User',
  components: {
    CommonHeader,
    UserLeft,
    IndexContent,
    Password,
    Message
  },
  data () {
    return {
      list: [],
      total: 0,
      page: 1,
      per_page: 10,
      user: {},
      show: 'index'
    }
  },
  methods: {
    getUserTopic () {
      userTopic(this.user.id, this.page, this.per_page).then(this.getUserTopicSucc)
    },
    getUserTopicSucc (res) {
      res = res.data.data
      this.list = res.list
      this.total = res.total
    },
    showContent (tab) {
      this.show = tab
    }
  },
  mounted () {
    // localStorage.removeItem('user')
    if (localStorage.getItem('user')) {
      this.user = JSON.parse(localStorage.getItem('user'))
    }
    this.getUserTopic()
  }
}
</script>